<script lang="tsx" setup>
/**
 * 头部组件
 */
import {onMounted, onUnmounted, ref} from "vue"
import {dateAddZero} from "@/frame/utils/data-helper/add-zero.ts"

/**
 * 定义prop
 */
const props = defineProps<{
  deviceTotalData: any
}>()

/**
 * 定义emit
 */
const emit = defineEmits<{
  (e: "change", data: any): void
}>()

/**
 * 定时器
 */
const timer: any = ref(null)

/**
 * 时间参数
 */
const dateTime = ref()
const timeYear = ref()
const timeDate = ref()

/**
 * 挂载运行
 */
onMounted(() => {
  getTimeData()
  timer.value = setInterval(() => {
    getTimeData()
  }, 1000)
})

/**
 * 销毁运行
 */
onUnmounted(() => {
  if (timer.value) {
    clearInterval(timer.value)
  }
})

/**
 * 监听时间改变
 */
const handleChange = () => {
  emit("change", dateTime.value)
}

/**
 * 获取时间数据
 */
const getTimeData = () => {
  const time = new Date()
  const year = time.getFullYear()
  const month = dateAddZero(time.getMonth() + 1)
  const day = dateAddZero(time.getDate())
  const hours = dateAddZero(time.getHours())
  const minutes = dateAddZero(time.getMinutes())
  const seconds = dateAddZero(time.getSeconds())
  timeDate.value = hours + ":" + minutes + ":" + seconds
  timeYear.value = year + "." + month + "." + day
}
</script>

<template>
  <div class="page-header">
    <div class="left">
      <div class="left-title">
        帅特龙设备信息看板
      </div>
      <div class="left-select">
        <el-date-picker v-model="dateTime" class="select-logout" clearable placeholder="时间"
                        size="default" type="date"
                        value-format="YYYY-MM-DD" @change="handleChange"></el-date-picker>
      </div>
      <div class="left-list">
        <div class="left-item">
          <div class="item-title">
            运行中：
          </div>
          <div class="item-content" style="color:#00D08F">
            {{ deviceTotalData.runData }}台
          </div>
          <div class="item-line"></div>
        </div>
        <div class="left-item">
          <div class="item-title" style="color:#FF7605">
            出勤：
          </div>
          <div class="item-content" style="color:#FF7605">
            {{ deviceTotalData.waitData }}台
          </div>
          <div class="item-line"></div>
        </div>
        <div class="left-item">
          <div class="item-title" style="color:#A9AFB9">
            关机：
          </div>
          <div class="item-content" style="color:#A9AFB9">
            {{ deviceTotalData.closeData }}台
          </div>
        </div>
      </div>
    </div>
    <div class="right">
      <div class="right-left">{{ timeYear }}</div>
      <div class="right-right">{{ timeDate }}</div>
    </div>
  </div>
</template>

<style lang="scss" scoped src="./index.scss">

</style>